<template>
  <el-container class="myProjects">
    <el-aside class="pro-left">
      <h5>{{$t('slideBar.myProjects')}}</h5>
    </el-aside>
    <el-aside class="pro-body">
      <el-row>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <i class="el-icon-plus"></i>
            <div style="padding: 14px;">
              <h2>创建项目</h2>
            </div>
          </el-card>
        </el-col>
        <template v-for="(item,index) in projects">
          <el-col :span="6" :key="index">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="item.src" class="image">
              <div style="padding: 14px;">
                <h2>{{item.name}}</h2>
              </div>
            </el-card>
          </el-col>
        </template>
      </el-row>
    </el-aside>
  </el-container>
</template>
<script>
  export default {
    data() {
      return {
        projects: [{
          src: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          name: 'xxx2'
        }, {src: '../static/img/baidu.jpg',
          name: '百度'}, {src: '../static/img/sina.jpg',
          name: '新浪'}, {}, {}],
      }
    }
  }

</script>
<style lang="scss">
  .myProjects {
    background: #fff;
    display: table;
    .pro-left {
      width: 1000px !important;
      color: #fff;
      display: table-cell;
      vertical-align: middle;
      background: #008000;
      text-align: center;
      font-size: 18px;
    }
    .pro-body {
      padding-top: 15px;
      display: table-cell;
      vertical-align: top;
      width: 10000px !important;
      zoom: 1;
      overflow: hidden;
      .el-col {
        padding: 0 10px 20px 10px;
        text-align: center;
        .el-card {
          i {
            line-height: 130px;
            font-size: 30px;
          }
          img {
            width: 100%;
          }
        }
      }
    }
  }

</style>
